{% extends '@SonataAdmin/CRUD/list.html.twig' %}

{% block stylesheets %}
    {{ parent() }}

    <link rel="stylesheet" href="{{ asset('other/bootstrap-fileinput/fileinput.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('other/bootstrap-fileinput/theme.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('other/bootstrap-fileinput/dropdown.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('other/bootstrap-fileinput/default.css') }}"/>
    <link rel="stylesheet" href="{{ asset('css/backend/gallery/list.css') }}"/>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script src="{{ asset('other/bootstrap-fileinput/sortable.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('other/bootstrap-fileinput/piexif.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('other/bootstrap-fileinput/fileinput.js') }}" type="text/javascript"></script>
    <script src="{{ asset('other/bootstrap-fileinput/theme.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('other/bootstrap-fileinput/dropdown.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('other/bootstrap-fileinput/zh.js') }}" type="text/javascript"></script>
{% endblock %}

{% block list_table %}
    <div class="col-xs-12 col-md-12">
        <div class="callout callout-info" style="margin-bottom: 15px;">
            <h4>提示：</h4>
            <p>图集目前最多只支持上传20张图片，大小为1MB，尺寸为600x600像素，支持拖拽排序</p>
        </div>

        <div class="box box-primary">
            <div class="box-header">
                <h4 class="box-title">
                    图集
                </h4>
            </div>
            <div class="box-body table-responsive no-padding">
                <div class="form-group" style="margin: 20px">
                    <input id="image-upload" type="file" multiple>
                </div>
            </div>
        </div>

        <script>
            let initialPreviewData = [];
            let initialPreviewConfigData = [];
            {% for image in gallery %}
            initialPreviewData.push('{{ image.path }}');
            initialPreviewConfigData.push({
                caption: "{{ image.originalName }}",
                size: {{ image.size }},
                width: "120px",
                url: "/admin/gallery/image_delete/{{ image.id }}",
                key: {{ image.id }},
                filename: "{{ image.path }}"
            });
            {% endfor %}

            $("#image-upload").fileinput({
                language: 'zh',
                uploadUrl: "/admin/gallery/image_upload",
                uploadAsync: true,      // 异步上传
                maxAjaxThreads: 1,
                allowedFileExtensions: ['jpg', 'png', 'jpeg'],
                maxFileSize: 1 * 1024,  // 文件允许上传大小
                minFileCount: 1,        // 最小上传数量
                maxFileCount: 9,        // 选择文件时允许最多数
                maxTotalFileCount: 20,   // 允许最大上传数
                overwriteInitial: false,
                resizeImage: true,      // 是否裁剪
                maxImageWidth: 600,     // 裁剪最大宽度
                maxImageHeight: 600,    // 裁剪最大高度
                initialPreview: initialPreviewData,
                initialPreviewAsData: true, // 确定是否仅发送预览数据，而不发送原始标记
                initialPreviewFileType: 'image', // 文件类型
                initialPreviewDownloadUrl: '{filename}', // 下载链接，调用filename指定参数
                initialPreviewConfig: initialPreviewConfigData,
                purifyHtml: true,
                uploadExtraData: {}
            }).on('filesorted', function (e, params) {
                let sort = [];
                $.each(params.stack, function (index, item) {
                    sort.push(item.key);
                });
                $.ajax({
                    type: "POST",
                    url: "/admin/gallery/image_sort",
                    dataType: 'json',
                    data: {"sort": sort},
                    success: function (result) {

                    },
                    error: function (e) {

                    }
                });
                // console.log('File sorted params', params);
            }).on('fileuploaded', function (e, params) {
                // console.log('File uploaded params', params);
            });
        </script>
    </div>
{% endblock %}

{% block list_filters_actions %}

{% endblock %}

{% block list_filters %}

{% endblock %}